<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv ="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>视频播放</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/waves.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <!--页面公共样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--页面样式-->
    <link rel="stylesheet" href="css/page.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <!--jquery等插件必须放head，后续js需要使用-->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/idangerous.swiper.js"></script>
    <script src="js/idangerous.swiper.scrollbar-2.1.js"></script>
    <script src="js/rangeslider.min.js"></script>
    <!--页面js必须放head里，防止页面抖动-->
    <script src="js/common.js"></script>
    <script src="js/startingvideo.js"></script>
</head>
<body>
<div class="unstart-video-page start-video-page">
    <div class="video-info-top">
        <div class="video-info">设计思维直播</div>
        <div class="video-id">ID:009527</div>
        <div class="video-status"><img src="images/icon/gif_playing.gif" class="casting" alt="">正在直播中</div>
        <a href="javascript:void(0)" class="video-exit-btn"><img src="images/icon/video-exit-btn.png" alt=""></a>
    </div>

    <div class="video-main-wrap">

        <div class="video-main-content">
           <div class="video-content">
               <img src="images/bac/videoImgbac.png" alt="">
           </div>
        </div>
        <div class="video-info-wrap">
            <div class="video-main-right-bar">
                <a href="javascript:void(0)">
                    <img src="images/icon/video_icon_03.png" alt="">
                </a>
            </div>
            <div class="video-main-right-info">
                <div class="video-main-right-title">
                    <h1>音乐鉴赏</h1>
                    <h4>ID：009527</h4>
                </div>
                <div class="video-main-right-sub-info">

                    <div class="start-time">
                        <img src="images/icon/video_icon_17.png" alt=""> 09月01号 17：50开始
                    </div>
                    <div class="talk-leader">
                        <img src="images/icon/video_icon_38.png" alt=""> 主讲人：魏坤
                    </div>
                </div>
                <div class="video-main-right-intro">
                    <div class="lesson-preview-title">课程信息：</div>
                    <p >我要从南走到北，我还要从白走到黑，我要所有的所有哦，但不要。我要从南走到北，我还要从白走到黑，我要所有的所有哦，但不要。我要从南走到北，我还要从白走到黑，我要所有的所有哦，但不要。我要从南走到北，我还要从白走到黑，我要所有的所有哦，但不要。我要从南走到北，我还要从白走到黑，我要所有的所有哦，但不要。我要从南走到北，我还要从白走到黑，我要所有的所有哦，但不要。我要从南走到北，我还要从白走到黑，我要所</p>
                </div>
                <div class="view-num"><img src="images/icon/video_icon_19.png" alt="">27个空间正在看</div>

                <div class="lesson-preview">
                    <div class="lesson-preview-title">今日课程:</div>
                    <div class="lesson-preview-content">
                        <div class="swiper-container">
                            <div class="swiper-scrollbar"></div>
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <ul>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">已结束</span>
                                        </li>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">已结束</span>
                                        </li>
                                        <li class="living-lesson">
                                            <span>音乐鉴赏</span><span class="font18">正在播放</span>
                                        </li>
                                        <li class="next-lessone">
                                            <span>小学语文直播</span><span class="font18">即将开始</span>
                                        </li>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">16:00开始</span>
                                        </li>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">16:00开始</span>
                                        </li>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">16:00开始</span>
                                        </li>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">16:00开始</span>
                                        </li>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">16:00开始</span>
                                        </li>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">16:00开始</span>
                                        </li>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">16:00开始</span>
                                        </li>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">16:00开始</span>
                                        </li>
                                        <li>
                                            <span>小学语文直播</span><span class="font18">16:00开始</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>






                    </div>
                </div>


            </div>

        </div>
        <div class="video-main-right-sildeback-bar">
            <a href="javascript:void(0)">
                <img src="images/icon/back_icon.png" alt="">
            </a>
        </div>
    </div>
    <div class="video-bottom-control">
        <div class="start-video-btn">
            <!--ispause记录当前视频是否被暂停，默认未暂停,1为正在播放，0为暂停-->
            <a href="javascript:void(0)" ispause = "1"><img src="images/icon/pause.png" alt=""></a>
        </div>
        <div class="refresh-btn"><a href="javascript:void(0)"><img src="images/icon/video_icon_41.png" alt=""></a></div>
        <div class="volumn-control-btn">
            <p class="on-off">
                <img src="images/icon/video_icon_34.png" class="voice-icon">
            </p>
            <div class="voice-controll">
                <input type="range" min="0" max="100" data-rangeslider="" id="volumn">
            </div>
        </div>
    </div>
    <div class="pause-icon">
        <img src="images/icon/video_icon_14.png" alt="">
    </div>
</div>


</body>
</html>
